<template>
  <div class="make">
    <div class="make-container">
      <div
        class="toggle-fullscreen"
        @click="toggleFullscreen"
        :class="{'is-fullscreen': isFullscreen}"
        v-if="!isFullscreen"
      >
        <i class="iconfont icon-fullscreen" title="进入全屏"></i>
      </div>
      <div class="drag-drop-box">
        <div
          class="toggle-fullscreen"
          @click="toggleFullscreen"
          :class="{'is-fullscreen': isFullscreen}"
          v-if="isFullscreen"
        >
          <i class="iconfont icon-exit-fullscreen" title="退出全屏"></i>
        </div>
        <drag-drop-container @activate-sprite="activateSprite" :make-template="makeTemplate" :active-sprite-index="activeSpriteIndex" ref="dndContainer"></drag-drop-container>
      </div>
      <div class="editor">
        <div class="editor-div">
          <div v-show="!isPreview">
            <div>模板名称：
              <Input v-model="modelName" clearable style="width: 40%"></Input>
            </div>
            <div class="tool-buttons">
              <Button type="primary" @click="pickBackgroundImage">选择背景</Button>
              <div class="export-image">
                <Button type="primary" @click="goPreview">在线预览</Button>
              </div>
            </div>
            <br>
            <div class="editor-container">
              <div id="editor"></div>
            </div>
            <br>
            <div class="buttons">
              <Button type="primary" @click="addText">添加文字</Button>
              <div class="file-picker">
                <Button type="primary">添加图片</Button>
                <input type="file" @change="fileChanged($event, 'picture')">
              </div>
              <Button type="primary" @click="removeSprite" :disabled="activeSpriteIndex === -1">删除</Button>
            </div>
            <div class="fixed-fields">
              <ul>
                <li
                        class="field"
                        v-for="(field, i) in variables"
                        :key="i"
                        :class="{'disabled': variableExist(i)}"
                        @click="addVariable(i)"
                >{{field.placeholder}}</li>
              </ul>
            </div>
            <div class="fixed-fields">
              <ul>
                <li class="field" :class="{'on': currAlign === 'left'}" @click="setAlign('left')">居左</li>
                <li class="field" :class="{'on': currAlign === 'center'}" @click="setAlign('center')">居中</li>
                <li class="field" :class="{'on': currAlign === 'right'}" @click="setAlign('right')">居右</li>
              </ul>
            </div>
            <div class="seals">
              <ul>
                <li class="seal" v-for="(seal, i) in seals" :key="i" @click="addSeal(i)">
                  <img :src="seal.seal_url">
                  <div class="organization">{{seal.organization}}</div>
                </li>
              </ul>
            </div>
            <div class="seals">
              <ul>
                <li class="seal" @click="addQRcode">
                  <img :src="QRcode">
                  <div class="organization">二维码</div>
                </li>
              </ul>
            </div>

            <div style="margin-top: 10px">
              <Button type="primary" @click="save">保存</Button>
              <Button type="ghost" style="margin-left: 10px" @click="back">返回</Button>
            </div>
          </div>

          <div v-show="isPreview">
            <Form :model="preForm" :label-width="60">
              <Row>
                <FormItem label="主题">
                  <Cascader :data="themeList" :value="theme" trigger="click" filterable :clearable="false" :render-format="setTheme" @on-change="themeChange" style="width: 50%" changeOnSelect ></Cascader>
                </FormItem>
              </Row>
              <Row>
                <FormItem label="奖项">
                  <Select v-model="preForm.diplomasId" :label-in-value="true" @on-change="dipChange">
                    <Option v-for="item in diplomasList" :value="item.id" :key="item.id">{{item.name}}</Option>
                  </Select>
                </FormItem>
              </Row>
              <Row>
                <FormItem label="会员">
                  <Select v-model="preForm.memberId" @on-change="memberChange">
                    <Option v-for="item in allMember" :value="item.key" :key="item.key">{{item.name}}</Option>
                  </Select>
                </FormItem>
              </Row>
              <Row>
                <FormItem label="单行人数">
                  <Select v-model="preForm.perNum" @on-change="numChange" style="width:20%">
                    <Option v-for="item in numList" :value="item" :key="item">{{item}}</Option>
                  </Select>
                </FormItem>
              </Row>
              <Row>
                <FormItem label="">
                  <Button type="primary" @click="backPreview">退出预览</Button>
                </FormItem>
              </Row>
            </Form>
          </div>
        </div>
      </div>
    </div>
    <Modal
      v-model="bgPickerVisible"
      title="选择底图"
      width="900"
      class-name="bg-picker"
      :transfer="false"
    >
      <div class="bg-picker-content">
        <ul>
          <li v-for="(item, i) in backgroundImages" :key="i" @click="selectBg(item)">
            <img :src="item" alt>
          </li>
        </ul>
      </div>
    </Modal>
  </div>
</template>

<script src="./make.js"></script>
<style lang="less" src="./make.less"></style>